<template>
  <div class="app-container">
    <div class="filter-container">
      <el-button v-waves class="filter-item" type="primary" @click="handleAddOrder()">
        添加求售订单
      </el-button>
    </div>
      <el-table :data="tableData" class="data_table" style="width: 100%;">
        <el-table-column prop="name" label="求售商家" width="100">
          <template slot-scope="{row}">
            <span>{{ row.store.storeName }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="place" label="商家地址" width="100">
          <template slot-scope="{row}">
            <span>{{ row.store.location }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="goods" label="求售商品" width="100">
          <template slot-scope="{row}">
            <span>{{ row.good.goodName }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="goodtype" label="商品类型" width="100">
        <template slot-scope="{ row }">
          <span>{{ row.good.goodType }}</span>
        </template>
        </el-table-column>
        <el-table-column prop="goodspec" label="规格型号" width="100">
        <template slot-scope="{ row }">
          <span>{{ row.good.spec }}</span>
        </template>
        </el-table-column>
        <el-table-column prop="date" label="保质期至" width="250">
          <template slot-scope="{row}">
            <el-date-picker ref="date" type="datetime" v-model="row.good.validDate" readonly />
          </template>
        </el-table-column>
        <el-table-column prop="num" label="求售数量" width="100">
          <template slot-scope="{row}">
            <span>{{ row.goodNumber }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="price" label="求售价格" width="100">
          <template slot-scope="{row}">
            <span>{{ row.price }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="date" label="截至日期" width="250">
          <template slot-scope="{row}">
            <el-date-picker ref="date" type="datetime" v-model="row.end_time" readonly />
          </template>
        </el-table-column>
        <el-table-column label="Actions" align="center" width="230" class-name="seeMore">
          <template slot-scope="{row}">
            <el-button v-waves class="filter-item" type="primary" @click="seeMore(row)">
              查看详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!--详细情况的表单-->
      <el-dialog :title="textMap.see" :visible.sync="dialogFormVisible">
        <el-form ref="dataFormsee" :rules="rules" :model="temp" label-position="left" label-width="70px" style="width: 400px; margin-left:50px;">
          <el-form-item label="求售店面" prop="shopName">
            <el-input v-model="temp.storeName" readonly/>
          </el-form-item>
          <el-form-item label="店面地址" prop="shopLocation">
            <el-input v-model="temp.storeLocation" readonly/>
          </el-form-item>
          <el-form-item label="商品编号" prop="goodId">
            <el-input v-model="temp.goodId" readonly />
          </el-form-item>
          <el-form-item label="求售商品" prop="goodName">
            <el-input v-model="temp.goodName" readonly />
          </el-form-item>
          <el-form-item label="商品类型" prop="goodType">
            <el-input v-model="temp.goodType" readonly />
          </el-form-item>
          <el-form-item label="商品规格" prop="spec">
            <el-input v-model="temp.spec" readonly />
          </el-form-item>
          <el-form-item label="商品保质期" prop="date">
            <el-date-picker ref="date" type="datetime" v-model="temp.validDate" readonly />
          </el-form-item>
          <el-form-item label="商品数量" prop="goodNumber">
            <el-input v-model="temp.goodNumber" readonly />
          </el-form-item>
          <el-form-item label="求售价格" prop="price">
            <el-input  v-model="temp.price" readonly/>
          </el-form-item>
          <el-form-item label="截至日期" prop="date">
            <el-date-picker ref="date" type="datetime" v-model="temp.end_time" readonly />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">
            返回
          </el-button>
          <el-button type="primary" v-show="show" @click="handleAddQuotation()" >
            提供报价
          </el-button>
          <el-button type="primary" v-show="show1" :disabled="dis">
            个人订单不可报价
          </el-button>
          <el-button type="primary" v-show="show2" :disabled="dis1">
            已报价
          </el-button>
        </div>
      </el-dialog>

      <!--报价单子-->
      <el-dialog :title="textMap.buy" :visible.sync="dialogFormVisible1">
        <el-form ref="dataFormbuy" :rules="rules" :model="offer" label-position="left" label-width="70px" style="width: 400px; margin-left:50px;">
          <el-form-item label="商品编号" prop="price">
            <el-input v-model="offer.goodId" readonly />
          </el-form-item>
          <el-form-item label="商品名称" prop="price">
            <el-input v-model="offer.goodName" readonly />
          </el-form-item>
          <el-form-item label="商品类型" prop="price">
            <el-input v-model="offer.goodType" readonly />
          </el-form-item>
          <el-form-item label="商品规格" prop="price">
            <el-input v-model="offer.spec" readonly />
          </el-form-item>
          <el-form-item label="商品保质期至" prop="date">
            <el-date-picker ref="date" type="datetime" v-model="offer.validDate" readonly />
          </el-form-item>
          <el-form-item label="商品数量" prop="price" >
            <el-input v-model="offer.goodNumber" readonly />
          </el-form-item>
          <el-form-item label="报价" prop="price">
            <el-input v-model="offer.offer" />
          </el-form-item>
          <el-form-item label="报价的截至日期" prop="date">
            <el-date-picker ref="date" type="datetime" v-model="offer.date" placeholder="请输入截至日期" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible1 = false">
            返回
          </el-button>
          <el-button type="primary" @click="sure()">
            确认
          </el-button>
        </div>
      </el-dialog>

      <!--添加求售订单-->
      <el-dialog :title="textMap.add" :visible.sync="dialogFormVisible2">
        <el-form ref="dataFormadd" :rules="rules" :model="order" label-position="left" label-width="70px" style="width: 400px; margin-left:50px;">
          <el-form-item label="求售商品ID" prop="goodName">
            <el-input ref="goodId" v-model="order.goodId" readonly />
          </el-form-item>
          <el-form-item label="求售商品" prop="goodName">
            <el-input  ref="goodName" v-model="order.goodName" placeholder="请输入求售商品"/>
          </el-form-item>
          <el-form-item label="商品类型" prop="goodType">
            <el-input  ref="goodtype" v-model="order.goodType" aria-placeholder="请输入商品类型"/>
          </el-form-item>
          <el-form-item label="商品规格" prop="spec">
            <el-input ref="goodtype" v-model="order.spec" readonly />
          </el-form-item>
          <el-form-item label="商品数量" prop="goodNum">
            <el-input ref="goodnumber" v-model="order.goodNumber" aria-placeholder="请输入商品数量"/>
          </el-form-item>
          <el-form-item label="期望价格" prop="price">
            <el-input
              ref="goodprice"
              v-model="order.price"
              :placeholder="
                '请输入期望价格,批发价为' +
                order.wholeSalePrice +
                ',零售价为' +
                order.retailPrice
              "
            />
          </el-form-item>
          <el-form-item label="截至日期" prop="date">
            <el-date-picker ref="date" type="datetime" v-model="order.date" placeholder="请输入截至日期" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible2 = false">
            返回
          </el-button>
          <el-button type="primary" @click="addOrder()">
            确认
          </el-button>
        </div>
      </el-dialog>

      <!--选择要求售的商品-->
      <el-dialog title = "选择商品" :visible.sync="chooseGoodVisible" width="72%">
        <el-table :data="goodTable" class="data_table" style="width: 100%">
          <el-table-column prop="goodId" label="商品Id" width="70">
            <template slot-scope="{ row }">
              <span>{{ row.goodId }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="goodName" label="商品名称" width="100">
            <template slot-scope="{ row }">
              <span>{{ row.goodName }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="goodtype" label="商品类型" width="100">
            <template slot-scope="{ row }">
              <span>{{ row.goodType }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="goodspec" label="规格型号" width="100">
            <template slot-scope="{ row }">
              <span>{{ row.spec }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="num" label="剩余库存" width="80">
            <template slot-scope="{ row }">
              <span>{{ row.goodNumber }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="price" label="批发价格" width="80">
            <template slot-scope="{ row }">
              <span>{{ row.wholeSalePrice }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="price" label="零售价格" width="80">
            <template slot-scope="{ row }">
              <span>{{ row.retailPrice }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="date" label="有效期至" width="250">
            <template slot-scope="{ row }">
              <el-date-picker
                ref="date"
                type="datetime"
                v-model="row.validDate"
                readonly
              />
            </template>
          </el-table-column>
          <el-table-column
            label="Actions"
            align="center"
            width="200"
            class-name="seeMore"
          >
            <template slot-scope="{ row }">
              <el-button
                class="filter-item"
                type="primary"
                @click="chooseGood(row)"
              >
                选择
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>

  </div>
</template>

<script>
  import axios from 'axios'
  import Vue from 'vue'
  import qs from 'qs'
  import request from '@/utils/request' 
  import { parse } from 'path-to-regexp'

  Vue.prototype.$qs = qs

  export default {
    name: 'tosell',
    inject: ['reload'],
    data () {
      return {
        orderType: 'ORDER_SOLD',
        orderState: 'ORDER_DISPLAY',
        accessToken: null,
        dbid: null,
        userName: "",
        password: "",
        storeNumber: '',
        storeId: '',
        storeName: '',
        storeLocation: '',
        repositoryNumber: null,
        tableData: [],
        getGoodDataType: 0,
        goodTable: [
          {
            goodId: null,
            goodName: null,
            goodType: "",
            spec: "",
            unit: null,
            wholeSalePrice: null,
            retailPrice: null,
            goodNumber: null,
            validDate: null,
          }
        ],
        textMap: {
          see: '详细情况',
          buy: '报价单',
          add: '添加求售物品'
        },
        dialogFormVisible: false,
        dialogFormVisible1: false,
        dialogFormVisible2: false,
        chooseGoodVisible: false,
        temp: {
          orderId: "",
          storeName: "",
          storeLocation: "",
          goodId: "",
          goodName: "",
          goodType: "",
          validDate: null,
          goodNumber: null,
          spec: "",
          unitNumber: null,
          price: 0,
          end_time: "",
        },
        show: false,
        show1: false,
        show2: false,
        dis: true,
        dis1: true,
        order: {
          goodId: null,
          goodName: null,
          goodType: null,
          spec: null,
          unitNumber: null,
          wholeSalePrice: 15,
          retailPrice: 20,
          validDate: new Date(),
          goodNumber: null,
          price: null,
          date: null,
        },
        offer: {
          orderId:null,
          goodId: null,
          goodName: null,
          goodType: null,
          spec: null,
          unitNumber: null,
          validDate: new Date(),
          goodNumber: null,
          offer: null,
          date: null,
        },
        quotionIds: [] //表示 为该订单报价的商家id列表
      }
    },
    mounted(){
      this.init()
    },
    methods: {
      init(){
        this.dialogFormVisible = false
        this.dialogFormVisible1 = false
        this.dialogFormVisible2 = false
        // init account data
        this.accessToken = JSON.parse(sessionStorage.getItem("access_token"))
        this.dbid = JSON.parse(sessionStorage.getItem("dbid"))
        this.userName = JSON.parse(sessionStorage.getItem("login_name"))
        this.password = JSON.parse(sessionStorage.getItem("password"))
        // init store data
        this.storeNumber= JSON.parse(sessionStorage.getItem("store")).storeNumber
        this.storeId = JSON.parse(sessionStorage.getItem('store')).storeId
        this.storeName = JSON.parse(sessionStorage.getItem('store')).storeName
        this.storeLocation = JSON.parse(sessionStorage.getItem('store')).storeLocation
        this.repositoryNumber = JSON.parse(sessionStorage.getItem('store')).repositoryNumber

        request.get('/orderService/getAllOrderByTypeDisplay/ORDER_SOLD').then(request=>{
          var Data=request.data
          this.tableData = Data.data
        }).catch((err)=>{
          console.log(err)
          this.$message.error("获取数据出错，请联系管理员！");
          return;
        }) 
      },
      
      getGoodList() {
      // 请求获取店面所有已上架的商品信息
      let repositoryNumber = JSON.parse(sessionStorage.getItem("store")).repositoryNumber
      request
        .get("/api/v1/linkjdy/getstoreGood/" + this.accessToken 
              + "/" + this.dbid + "/" + this.storeId + "/" + repositoryNumber)
        .then((request) => {
          var respData = request.data
          this.goodTable = respData.data
          this.goodTable.forEach(good => {
            good.validDate = new Date(good.validDate)
          })
        })
        .catch(() => {
          this.loading = false;
          this.$message.error("获取数据出错，请联系管理员！");
          return;
        });
        this.chooseGoodVisible = true;
      },

      chooseGood(row) {
        //  处理添加求购订单的情况
        this.order.goodId = row.goodId
        this.order.goodName = row.goodName
        this.order.goodType = row.goodType
        this.order.spec = row.spec
        this.order.unitNumber = row.unit
        this.order.wholeSalePrice = row.wholeSalePrice
        this.order.retailPrice = row.retailPrice
        this.order.validDate = row.validDate

        this.chooseGoodVisible = false
        this.dialogFormVisible2 = true
      },

      handleAddOrder() {
      this.getGoodDataType = 1
      this.getGoodList()
      },

      addOrder() {
        // 成功
        request.post('/orderService/addAOrder', {
          orderId: 0,
          orderType: this.orderType,
          orderState: this.orderState,
          username: this.userName,
          password: this.password,
          storeId: this.storeNumber,
          storeName: this.storeName,
          storeLocation: this.storeLocation,
          warehouseNumber: this.repositoryNumber,
          goodId: this.order.goodId,
          goodName: this.order.goodName,
          goodNumber: this.order.goodNumber,
          goodType: this.order.goodType,
          spec: this.order.spec,
          unit: this.order.unitNumber,
          wholeSalePrice: this.order.wholeSalePrice,
          retailPrice: this.order.retailPrice,
          validDate: 
            this.order.validDate.getFullYear() +
            "." +
            (this.order.validDate.getMonth() + 1) +
            "." +
            this.order.validDate.getDate() +
            "." +
            this.order.validDate.getHours(),
          price: this.order.price,
          start_time:  new Date().getFullYear()+"." + (new Date().getMonth()+1)+"."+ new Date().getDate()+"."+ new Date().getHours(),
          end_time: this.order.date.getFullYear()+"." +(this.order.date.getMonth()+1)+"."+this.order.date.getDate()+"."+this.order.date.getHours(),
          // exhibition_fee: 0
          }
        ).then(request=>{
          var Data=request.data
          if (Data.code == 200){
            this.$message.success("添加成功")
            // 重新加载界面
            this.init()
          }
        }).catch((err)=>{
          console.log(err)
          this.$message.error("获取数据出错，请联系管理员！");
          return;
        })
        // 初始化数据
        // this.order.goodName = ''
        // this.order.goodType =''
        // this.order.price = 0
        // this.order.goodNum = 0
        // this.order.date = new Date()
        this.order.price = null;
        this.order.goodNumber = null;
        this.order.date = null;
      },

      seeMore(row) {
        this.temp.storeName = row.store.storeName;
        this.temp.storeLocation = row.store.location;
        this.temp.goodId = row.good.goodId;
        this.temp.goodName = row.good.goodName;
        this.temp.goodNumber = row.goodNumber;
        this.temp.goodType = row.good.goodType;
        this.temp.spec = row.good.spec;
        this.temp.unitNumber = row.good.unit;
        this.temp.validDate = row.good.validDate;
        this.temp.end_time = row.end_time;
        this.temp.price = row.price;
        this.temp.orderId = row.orderId;
        request.get('/quotationService/getQuotionsStoreIdByOrderId/'+row.orderId).then(request=>{
          console.log("request" + request)
          var Data=request.data
          if (this.storeNumber == row.store.storeId) {
            this.show1 = true
            this.show2 = false
            this.show = false
          } else if(this.isInArray(Data.data, this.storeNumber)){
            this.show2 = true
            this.show1=false
            this.show=false
          }else{
            this.show = true
            this.show1=false
            this.show2=false
          }
        }).catch((err)=>{
          this.$message.error("获取数据出错，请联系管理员！")
          return
        })

        this.dialogFormVisible = true
      },

      handleAddQuotation() {
        //  处理新增报价单
        this.getGoodDataType = 2

        this.offer.goodId = this.temp.goodId
        this.offer.goodName = this.temp.goodName
        this.offer.goodType = this.temp.goodType
        this.offer.spec = this.temp.spec
        this.offer.unitNumber = this.temp.unitNumber
        this.offer.validDate = this.temp.validDate
        this.offer.goodNumber = this.temp.goodNumber

        this.chooseGoodVisible = false
        this.dialogFormVisible1 = true
      },

      sure() {
        // 提供报价
        console.log("提供的报价为 ： " + this.offer.offer)
        // 报价的单子为 temp
        console.log("时间为"+ this.offer.date)
        console.log("保质期为"+ this.offer.validDate)
        this.offer.validDate = new Date(this.offer.validDate)
        request.post('/quotationService/addQuotation',{
          quotationId: 0,
          quotedType: "QUOTATION_BUY",
          quotedState: "QUOTATION_DISPLAY",
          quotedPrice: this.offer.offer,
          username: this.userName,
          password: this.password,
          storeId: this.storeNumber,
          storeName: this.storeName,
          storeLocation: this.storeLocation,
          warehouseNumber: this.repositoryNumber,
          goodId: this.offer.goodId,
          goodName: this.offer.goodName,
          goodNumber: this.offer.goodNumber,
          goodType: this.offer.goodType,
          spec: this.offer.spec,
          unit: this.offer.unitNumber,
          validDate: 
            this.offer.validDate.getFullYear() +
            "." +
            (this.offer.validDate.getMonth() + 1) +
            "." +
            this.offer.validDate.getDate() +
            "." +
            this.offer.validDate.getHours(),
          start_time:  new Date().getFullYear()+"." + (new Date().getMonth()+1)+"."+ new Date().getDate()+"."+ new Date().getHours(),
          end_time: this.offer.date.getFullYear()+"." +(this.offer.date.getMonth()+1)+"."+this.offer.date.getDate()+"."+this.offer.date.getHours(),
          orderId: this.temp.orderId
        }).then(request=>{
          console.log("request" + request)
          var Data=request.data
          if (Data.code == 200){
            this.$message.success("报价成功")
            // this.offer = 0
            // this.offer.goodname = ''
            // this.offer.goodtype = ''
            // this.offer.goodnum = 0
            // this.offer.date = new Date()
            this.dialogFormVisible1 = false
            this.init()
          } else {
            this.$message.error(Data.message)
          }
        }).catch((err)=>{
          console.log(err)
          this.$message.error("获取数据出错，请联系管理员！")
          return
        })
      },

      isInArray(array, value){
        var a = 1
        array.forEach(function(index) {
          if(index == value){
            a = 0
          }
        })
        console.log("awei " + a)
        return a == 0?true:false
      }
    }
  }
</script>

<style scoped>

</style>
